<template>
  <el-dialog :title="edit_id ? '编辑场景' : '新建场景'" v-model="visible"
             :close-on-click-modal="false" :append-to-body="true"
             width="800px" @close="handleCancel">
    <div class="scene-name-container">
      <div class="scene-name">场景名称</div>
      <el-input v-model.trim="saveName" :maxlength="10" class="scene-input"
                placeholder="请输入场景名称，最多10个字符"/>
    </div>
    <div class="scene-name">筛选条件</div>
    <el-form id="scene-filter-container" class="filter-container">
      <el-form-item>
        <template v-for="(formItem, index) in form" :key="index">
          <el-row>
            <el-col :span="8">
              <el-select v-model="formItem.fieldName"
                         placeholder="请选择要筛选的字段名"
                         @change="fieldChange(formItem)"
                         @focus="fieldFocus">
                <el-option v-for="item in fieldList" :key="item.fieldName"
                           :label="item.name" :value="item.fieldName"/>
              </el-select>
            </el-col>

            <template v-if="showCalCondition(formItem.formType, formItem.fieldName)">
              <el-col :span="1">&nbsp;
              </el-col>
              <el-col :span="4">
                <el-select v-model="formItem.condition" placeholder="请选择范围"
                           @change="selectChange($event,formItem)">
                  <el-option
                      v-for="item in advancedFilter.getAdvancedFilterOptions(formItem.formType, formItem.fieldName)"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"/>
                </el-select>
              </el-col>
            </template>

            <!-- 商机组 -->
            <el-col v-if="formItem.formType == 'business_type'" :span="1">&nbsp;
            </el-col>
            <el-col v-if="formItem.formType == 'business_type'" :span="4">
              <el-select v-model="formItem.typeId" @change="typeOptionsChange(formItem)">
                <el-option v-for="item in formItem.typeOption" :key="item.typeId"
                           :label="item.name" :value="item.typeId"/>
              </el-select>
            </el-col>

            <el-col :span="1">&nbsp;</el-col>
            <el-col :span="getValueSpan(formItem.formType, formItem.fieldName) ? 8 : 13" style="position: relative;">
              <template v-if="formItem.condition === 'isNull' || formItem.condition === 'isNotNull'">
                &nbsp;
              </template>
              <template v-else>
                <el-select v-if=
                               "formItem.formType === 'checkStatus'
                               || formItem.formType === 'dealStatus'
                               || formItem.fieldName === 'invoiceStatus'
                               || (formItem.formType === 'select' && getSettingValueType(formItem.setting) != 'string')"
                           v-model="formItem.value"
                           placeholder="请选择筛选条件">
                  <el-option v-for="item in formItem.setting" :key="item.value"
                             :label="item.name" :value="item.value"/>
                </el-select>
                <el-select v-else-if="formItem.formType === 'select' || formItem.formType === 'checkbox'"
                           v-model="formItem.value"
                           multiple placeholder="请选择筛选条件">
                  <el-option v-for="item in formItem.setting" :key="item"
                             :label="item" :value="item"/>
                </el-select>
                <template v-else-if=
                              "formItem.formType == 'number'
                              || formItem.formType == 'floatnumber'
                              || formItem.formType == 'percent'">
                  <div v-if="formItem.type === 14">
                    <el-input-number v-model="formItem.min" :controls="false"
                                     style="width: 100px;" class="small"/>
                    <span>-</span>
                    <el-input-number v-model="formItem.max" :controls="false"
                                     style="width: 100px;" class="small"/>
                  </div>
                  <el-input-number v-else v-model="formItem.value"
                                   :controls="false" style="width: 100%;" class="small"/>
                </template>
                <template v-else-if="formItem.formType === 'date' || formItem.formType === 'datetime'">
                  <el-date-picker v-show="formItem.type === 14"
                                  :ref="`wkDatePicker${index}`"
                                  v-model="formItem.range"
                                  :picker-options="getPickerOptions(formItem, index)"
                                  :type="formItem.formType === 'date' ? 'daterange' : 'datetimerange'"
                                  :value-format="formItem.formType === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-dd HH:mm:ss'"
                                  range-separator="-"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期"
                                  align="right"
                                  @change="datePickerChange(formItem)"/>
                  <div v-if="formItem.timeType" class="date-range-content"
                       @click="dateRangeSelect(formItem, index)">
                    {{ formItem.timeTypeName }}
                  </div>
                  <el-date-picker v-show="formItem.type !== 14" v-model="formItem.value"
                                  :value-format="formItem.formType === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
                                  :type="formItem.formType" placeholder="选择日期"/>
                </template>
                <el-select v-else-if="formItem.formType === 'business_type'"
                           v-model="formItem.statusId">
                  <el-option v-for="item in formItem.statusOption" :key="item.statusId"
                             :label="item.name"
                             :value="item.statusId"/>
                </el-select>
                <wk-user-select v-else-if="formItem.formType === 'user' || formItem.formType === 'single_user'"
                                :radio="false" v-model="formItem.value"
                                @change="userDepChange(formItem, arguments[0], arguments[1])"/>
                <wk-dep-select v-else-if="formItem.formType === 'structure'" :radio="false"
                               v-model="formItem.value"
                               @change="userDepChange(formItem, arguments[0], arguments[1])"/>
                <el-switch v-else-if="formItem.formType == 'boolean_value'"
                           v-model="formItem.value" active-value="1" inactive-value="0"/>
                <XhProuctCate v-else-if="formItem.formType === 'category'"
                                :item="formItem" :value="formItem.value"
                                @value-change="arrayValueChange"/>
                <v-distpicker v-else-if="formItem.formType === 'map_address'"
                              :province="formItem.address.state"
                              :city="formItem.address.city"
                              :area="formItem.address.area"
                              @province="selectProvince($event,formItem)"
                              @city="selectCity($event,formItem)"
                              @area="selectArea($event,formItem)"/>
                <XhProuctCate v-else-if="formItem.formType == 'position'"
                             :show-detail="false"
                             :props="{ checkStrictly: true }"
                             v-model="formItem.value"/>
                <el-input v-else v-model="formItem.value" placeholder="多个条件请用；隔开"/>
              </template>
            </el-col>
            <el-col :span="1" class="delete">
              <i class="el-icon-error delete-btn" @click="handleDelete(index)"/>
            </el-col>
          </el-row>
        </template>
      </el-form-item>
    </el-form>
    <p v-show="showErrors" class="el-icon-warning warning-info">
      <span class="desc">筛选条件中有重复项！</span>
    </p>
    <el-button link @click="handleAdd">+ 添加筛选条件</el-button>
    <div class="save">
      <div class="save-setting">
        <el-checkbox v-model="saveDefault">设置为默认</el-checkbox>
      </div>
    </div>
    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button v-debounce="handleConfirm" type="primary">确 定</el-button>
      </div>
    </template>

  </el-dialog>
</template>

<script setup>
/**
 * fieldList: 高级筛选的字段
 *   type:  date || datetime || select || 其他 input
 */

import {useAdvancedFilterHook} from "@/hooks/useAdvancedFilterHook.js";
import {isArray, isEmpty} from "utils/types.js";
import {objDeepCopy} from "utils";

import {crmSceneSaveAPI, crmSceneUpdateAPI} from '/src/api/crm/common.js'
import {productCategoryIndexAPI} from '/src/api/admin/crm.js'

import crmTypeModel from '/src/views/crm/model/crmTypeModel.js'
import {XhProuctCate} from '/src/components/CreateCom/index.js'
import WkUserSelect from '/src/szcomponent/NewCom/SzDeptUserComp/WkUserSelect/index.vue'
import WkDepSelect from '/src/szcomponent/NewCom/SzDeptUserComp/WkDepSelect/index.vue'
import VDistpicker from '/src/szcomponent/VDistpicker/index.js'
import WkPosition from '/src/components/NewCom/WkPosition/index.vue'
import {nextTick, getCurrentInstance, ref} from "vue"


// 引入消息总线
const cxt = getCurrentInstance()
const bus = cxt.appContext.config.globalProperties.$bus

const advancedFilter = useAdvancedFilterHook();


defineOptions({
  name: 'CreateScene', // 新建场景
})

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    required: true,
    default: false
  },
  fieldList: {
    type: Array,
    required: true,
    default: () => {
      return []
    }
  },
  obj: {
    type: Object,
    required: true,
    default: () => {
      return {}
    }
  },
  /** 没有值就是全部类型 有值就是当个类型 */
  crmType: {
    type: String,
    default: ''
  },
  /** 名字和 默认 id 编辑的时候需要 */
  name: {
    type: String,
    default: ''
  },
  isDefault: {
    type: Boolean,
    default: false
  },
  edit_id: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['update:dialogVisible', 'save-success'])


const form = ref([])
const visible = ref(false) // 控制展示
const showErrors = ref(false)
const saveDefault = ref(false) // 设置为默认场景
const saveName = ref(null) // 场景名称
const timeTypes = ref([
  {text: '本年度', value: 'year'},
  {text: '上一年度', value: 'lastYear'},
  {text: '下一年度', value: 'nextYear'},
  {text: '上半年', value: 'firstHalfYear'},
  {text: '下半年', value: 'nextHalfYear'},
  {text: '本季度', value: 'quarter'},
  {text: '上一季度', value: 'lastQuarter'},
  {text: '下一季度', value: 'nextQuarter'},
  {text: '本月', value: 'month'},
  {text: '上月', value: 'lastMonth'},
  {text: '下月', value: 'nextMonth'},
  {text: '本周', value: 'week'},
  {text: '上周', value: 'lastWeek'},
  {text: '下周', value: 'nextWeek'},
  {text: '今天', value: 'today'},
  {text: '昨天', value: 'yesterday'},
  {text: '明天', value: 'tomorrow'},
  {text: '过去7天', value: 'previous7day'},
  {text: '过去30天', value: 'previous30day'},
  {text: '未来7天', value: 'future7day'},
  {text: '未来30天', value: 'future30day'}
])


watch(() => props.dialogVisible, (val) => {
  console.log("props", props)
  console.log("props", val)
  if (val) {
    // 处理编辑数据
    let form1 = []
    if (props.edit_id) {
      for (const field in props.obj.obj) {
        const element = props.obj.obj[field]
        const item = getItem()
        item.fieldName = element.name
        item.formType = element.formType
        item.type = element.type
        advancedFilter.getAdvancedFilterOptions(element.formType, element.fieldName).forEach(child => {
          if (element.type === child.type) {
            item.condition = child.value
          }
        })

        // 校准setting
        if (item.formType === 'checkbox' || item.formType === 'select' || item.formType === 'dealStatus' || item.formType === 'checkStatus') {
          item.setting = getEditSetting(item.formType, item.fieldName)
        }

        if (element.formType == 'date' || element.formType == 'datetime') {
          item.value = '' // 时间点
          // .$set(item, 'timeType', '')
          // .$set(item, 'timeTypeName', '')
          // .$set(item, 'range', [])
          item['timeType'] = ''
          item['timeTypeName'] = ''
          item['range'] = []

          if (item.type === 14) {
            if (isArray(element.values) && element.values.length > 0) {
              if (element.values.length === 1) {
                item.timeType = element.values[0]
                const timeObj = timeTypes.value.find(tItem => tItem.value === item.timeType)
                if (timeObj) {
                  item.timeTypeName = timeObj.text
                }
              } else {
                item['range'] = element.values.slice(0, 2)
              }
            } else {
              item.value = ''
            }
          } else {
            item.value = element.values[0]
          }
        } else if (element.formType == 'number'
            || element.formType == 'floatnumber'
            || element.formType == 'percent') {
          item.min = ''
          item.max = ''
          item.value = ''
          if (item.type === 14) {
            item.min = isArray(element.values) && !isEmpty(element.values[0]) ? element.values[0] : ''
            item.max = isArray(element.values) && !isEmpty(element.values[1]) ? element.values[1] : ''
          } else {
            item.value = element.values[0]
          }
        } else if (element.formType == 'business_type') {
          item.typeId = element.values[0]
          item.statusId = element.values.length > 1 ? element.values[1] : null
          item.typeOption = getEditSetting(item.formType, item.fieldName)
          if (element.typeId) {
            const obj = item.typeOption.find(typeItem => {
              return typeItem.typeId === element.typeId
            })
            if (obj) {
              item.statusOption = obj.statusList
            } else {
              item.statusOption = []
            }
          }
        } else if (element.formType == 'user'
            || element.formType == 'single_user'
            || element.formType == 'structure'
            || element.formType == 'checkbox'
            || element.formType == 'position') {
          item.value = element.values
        } else if (element.formType == 'select') {
          if (getSettingValueType(item.setting) != 'string') {
            item.value = element.values[0]
          } else {
            item.value = element.values
          }
        } else if (element.formType == 'category') {
          item.value = []
          getProductCategoryValue(item, element.values[0])
        } else if (element.formType == 'map_address') {
          const addressArr = element.values[0].split(',')
          item.address = {
            state: addressArr.length > 0 ? addressArr[0] : '',
            city: addressArr.length > 1 ? addressArr[1] : '',
            area: addressArr.length > 2 ? addressArr[2] : ''
          }
        } else {
          item.setting = element.setting
          item.value = element.values.join(';')
        }

        form.push(item)
      }
    } else {
      form1 = objDeepCopy(props.obj.form)
      if (form.length == 0) {
        form1.push(getItem())
      }
    }

    console.log("props1", props.obj.form)
    console.log("props1", form1)
    form.value = form1
    console.log("props2", form)
    /** 只有编辑会牵扯到这两个字段赋值 */
    if (props.name) {
      saveName.value = props.name
    } else {
      saveName.value = ''
    }
    console.log("props3", form)
    if (props.isDefault) {
      saveDefault.value = props.isDefault
    } else {
      saveDefault.value = false
    }
    console.log("props4", form)
  }
  visible.value = props.dialogVisible
  console.log("props5", visible)
}, {
  // deep: true,
  // immediate: true
})


watch(form, () => {
  nextTick(() => {
    let container = document.getElementById('scene-filter-container')
    console.log("container", container)
    if (container != null) {
      container.scrollTop = container.scrollHeight
    }

  })
})


onMounted(() => {
  console.log("onMounted", props)
})

/**
 * 获取编辑setting
 */
function getEditSetting(formType, fieldName) {
  const obj = props.fieldList.find(item => {
    return item.formType == formType && item.fieldName == fieldName
  })

  if (obj) {
    return obj.setting
  }

  return []
}

/**
 * 获取产品类别的值
 */
function getProductCategoryValue(item, categoryId) {
  productCategoryIndexAPI().then(res => {
    const categoryList = res.data.data || []
    const categoryIds = []
    filterProductTree(categoryList, categoryId, categoryIds)
    item.value = categoryIds.reverse()
  }).catch(() => {  })
}

function filterProductTree(tree, categoryId, categoryIds) {
  for (let index = 0; index < tree.length; index++) {
    const element = tree[index]
    if (element.categoryId == categoryId) {
      categoryIds.push(categoryId)
      filterProductTree(tree, element.pid, categoryIds)
      break
    }
  }
}

/**
 * 位置更改
 */
function selectProvince(data, formItem) {
  formItem.address.state = data.value
}

function selectCity(data, formItem) {
  formItem.address.city = data.value
}

function selectArea(data, formItem) {
  formItem.address.area = data.value
}

function getItem() {
  return {
    fieldName: '',
    name: '',
    type: 3,
    formType: '',
    condition: 'contains',
    value: '',
    setting: [],
    typeOption: [],
    statusOption: [],
    typeId: '',
    statusId: ''
  }
}

/**
 * 商机组状态
 */
function typeOptionsChange(formItem) {
  if (formItem.typeId) {
    const obj = formItem.typeOption.find(item => {
      return item.typeId === formItem.typeId
    })
    formItem.statusOption = obj.statusList || []
  } else {
    formItem.statusOption = []
  }
  formItem.statusId = ''
}

/**
 * 用户创建人
 * 产品类别
 */
function arrayValueChange(data) {
  if (data.value.length > 0) {
    data.item.value = data.value
    data.item.valueContent = data.valueContent
  } else {
    data.item.value = []
  }
}

/**
 * 用户部门change
 */
function userDepChange(formItem, dataIds, data) {
  // 用于部门员工的展示
  formItem.valueContent = data
}

/**
 * 连接条件的变更
 */
function selectChange(event, formItem) {
  advancedFilter.getAdvancedFilterOptions(formItem.formType, formItem.fieldName).forEach(item => {
    if (item.value === event) {
      formItem.type = item.type
    }
  })
}

/**
 * 是否展示条件
 */
function showCalCondition(formType, fieldName) {
  return advancedFilter.getAdvancedFilterOptions(formType, fieldName).length > 0
}

/**
 * 值span
 */
function getValueSpan(formType, fieldName) {
  if (formType == 'business_type') {
    return 8
  }
  return showCalCondition(formType, fieldName) ? 8 : 13
}

/**
 * 聚焦
 */
function fieldFocus() {
  // todo whf 这里还没改
  this.$el.click()
}

/**
 * 当前选择的字段名改变，判断是否有重复
 * @param formItem
 */
function fieldChange(formItem) {
  const obj = props.fieldList.find(item => {
    return item.fieldName === formItem.fieldName
  })
  if (obj) {
    formItem.formType = obj.formType
    formItem.name = obj.name
    if (formItem.formType == 'business_type') {
      formItem.typeOption = obj.setting
      formItem.statusOption = []
      formItem.typeId = ''
      formItem.statusId = ''
      formItem.value = ''
    } else if (formItem.formType == 'checkStatus'
        || formItem.formType == 'dealStatus') {
      formItem.setting = obj.setting || []
      formItem.value = ''
    } else if (formItem.formType == 'map_address') {
      formItem.address = {
        state: '',
        city: '',
        area: ''
      }
    } else if (formItem.formType === 'user'
        || formItem.formType === 'single_user'
        || formItem.formType === 'structure'
        || formItem.formType === 'category'
        || formItem.formType === 'position') {
      formItem.value = []
    } else if (formItem.formType === 'date'
        || formItem.formType === 'datetime') {
      formItem.value = '' // 时间点
      // .$set(formItem, 'timeType', '')
      // .$set(formItem, 'timeTypeName', '')
      // .$set(formItem, 'range', [])
      formItem['timeType'] = ''
      formItem['timeTypeName'] = ''
      formItem['range'] = []
    } else if (formItem.formType == 'select'
        || formItem.formType === 'checkbox') {
      formItem.setting = obj.setting || []
      formItem.value = []
    } else if (formItem.formType == 'number'
        || formItem.formType == 'floatnumber'
        || formItem.formType == 'percent') {
      formItem.min = ''
      formItem.max = ''
      formItem.value = ''
    } else {
      formItem.value = ''
    }

    const conditions = advancedFilter.getAdvancedFilterOptions(formItem.formType)
    if (conditions.length > 0) {
      const conditionObj = conditions[0]
      formItem.condition = conditionObj.value
      formItem.type = conditionObj.type
    } else {
      formItem.condition = 'is'
      formItem.type = 1
    }
  }

  getError()
}

/**
 * 取消选择
 */
function handleCancel() {
  visible.value = false
  emits('update:dialogVisible', false)
}

/**
 *获取错误
 */
function getError() {
  showErrors.value = false
  const fieldNames = []
  for (let index = 0; index < form.value.length; index++) {
    const item = form.value[index]
    if (fieldNames.includes(item.fieldName)) {
      showErrors.value = true
      break
    } else {
      fieldNames.push(item.fieldName)
    }
  }
}

/**
 * 确定选择
 */
function handleConfirm() {
  if (showErrors.value) {
    ElMessage.error({message: '筛选条件中有重复项！'})
    return
  }
  if (!saveName.value || saveName.value === '') {
    ElMessage.error({message: '场景名称不能为空！'})
    return
  }
  for (let i = 0; i < form.value.length; i++) {
    const o = form.value[i]
    if (!o.fieldName || o.fieldName === '') {
      ElMessage.error({message: '筛选的字段名称不能为空！'})
      return
    }
    if (o.formType == 'business_type') {
      if (!o.typeId && !o.statusId) {
        ElMessage.error({message: '筛选内容不能为空！'})
        return
      }
    } else if (o.formType == 'map_address') {
      if (!o.address.state && !o.address.city && !o.address.area) {
        ElMessage.error({message: '筛选内容不能为空！'})
        return
      }
    } else if (o.formType == 'date'
        || o.formType == 'datetime') {
      if (o.condition != 'isNull' && o.condition != 'isNotNull') {
        if (o.type === 14) {
          if (isEmpty(o.timeType) && isEmpty(o.range)) {
            ElMessage.error({message: '筛选内容不能为空！'})
            return
          }
        } else {
          if (isEmpty(o.value)) {
            ElMessage.error({message: '筛选内容不能为空！'})
            return
          }
        }
      }
    } else if (o.formType == 'number'
        || o.formType == 'floatnumber'
        || o.formType == 'percent') {
      if (o.condition != 'isNull' && o.condition != 'isNotNull') {
        if (o.type === 14) {
          if (isEmpty(o.min) || isEmpty(o.max)) {
            ElMessage.error({message: '筛选内容不能为空！'})
            return
          }
        } else {
          if (isEmpty(o.value)) {
            ElMessage.error({message: '筛选内容不能为空！'})
            return
          }
        }
      }
    } else if (o.formType == 'user'
        || o.formType == 'single_user'
        || o.formType == 'structure'
        || o.formType == 'category'
        || o.formType == 'checkbox'
        || o.formType == 'position') {
      if (!o.value || o.value.length === 0) {
        if (o.condition != 'isNull' && o.condition != 'isNotNull') {
          ElMessage.error({message: '筛选内容不能为空！'})
          return
        }
      }
    } else if (isEmpty(o.value)) {
      if (o.condition != 'isNull' && o.condition != 'isNotNull') {
        ElMessage.error({message: '筛选内容不能为空！'})
        return
      }
    }
  }
  const obj = []
  form.value.forEach(o => {
    if (o.formType == 'datetime' || o.formType == 'date') {
      let dataValues = []
      if (o.type === 14) {
        if (!isEmpty(o.timeType)) {
          dataValues = [o.timeType]
        } else {
          dataValues = o.range
        }
      } else {
        dataValues = [o.value]
      }
      obj.push({
        formType: o.formType,
        name: o.fieldName,
        type: o.type,
        values: dataValues
      })
    } else if (o.formType == 'number'
        || o.formType == 'floatnumber'
        || o.formType == 'percent') {
      let dataValues = []
      if (o.type === 14) {
        dataValues = [isEmpty(o.min) ? '' : o.min, isEmpty(o.max) ? '' : o.max]
      } else {
        dataValues = [o.value]
      }
      obj.push({
        formType: o.formType,
        name: o.fieldName,
        type: o.type,
        values: dataValues
      })
    } else if (o.formType == 'business_type') {
      obj.push({
        formType: o.formType,
        name: o.statusId ? 'statusId' : 'typeId',
        type: 1,
        values: o.statusId ? [o.typeId, o.statusId] : [o.typeId]
      })
    } else if (o.formType == 'user' || o.formType == 'single_user') {
      obj.push({
        type: o.type,
        values: o.value,
        formType: o.formType,
        name: o.fieldName
      })
    } else if (o.formType == 'position') {
      obj.push({
        type: o.type,
        values: o.value.filter(item => !isEmpty(item.name)).map(item => JSON.stringify(item)),
        formType: o.formType,
        name: o.fieldName
      })
    } else if (o.formType == 'structure') {
      obj.push({
        type: o.type,
        values: o.value,
        formType: o.formType,
        name: o.fieldName
      })
    } else if (o.formType == 'checkbox') {
      obj.push({
        type: o.type,
        values: o.value,
        formType: o.formType,
        name: o.fieldName
      })
    } else if (o.formType == 'category') {
      obj.push({
        type: 1,
        values: [o.value[o.value.length - 1]],
        formType: o.formType,
        name: o.fieldName
      })
    } else if (o.formType == 'select') {
      let values = o.value
      if (getSettingValueType(o.setting) != 'string') {
        values = [o.value]
      }
      obj.push({
        type: o.type,
        values: values,
        formType: o.formType,
        name: o.fieldName
      })
    } else if (o.formType == 'map_address') {
      const value = []
      for (const key in o.address) {
        const addValue = o.address[key]
        if (addValue) {
          value.push(addValue)
        }
      }
      obj.push({
        values: [value.join(',')],
        type: 1,
        formType: o.formType,
        name: o.fieldName
      })
    } else {
      let values = []
      if (typeof o.value === 'string') {
        const temp = o.value.replace(/；/g, ';')
        values = temp.split(';').filter(item => item !== '' && item !== null)
      } else {
        values = [o.value]
      }

      obj.push({
        type: o.type,
        values: values,
        formType: o.formType,
        name: o.fieldName
      })
    }
  })
  const data = {
    obj: obj,
    form: form.value,
    saveDefault: saveDefault.value,
    saveName: saveName.value
  }
  requestCreateScene(data)
}

// 创建场景
function requestCreateScene(data) {
  /** 编辑操作 */
  if (props.edit_id) {
    crmSceneUpdateAPI({
      isDefault: data.saveDefault ? 1 : 0,
      name: data.saveName,
      sceneId: props.edit_id,
      type: crmTypeModel[props.crmType],
      data: JSON.stringify(data.obj)
    }).then(res => {
      ElMessage.success({message: '编辑成功'})
      // 新建成功
      emits('save-success')
      handleCancel()
    }).catch(() => {})
  } else {
    crmSceneSaveAPI({
      type: crmTypeModel[props.crmType],
      isDefault: data.saveDefault ? 1 : 0,
      name: data.saveName,
      data: JSON.stringify(data.obj)
    }).then(res => {
      // 新建成功
      emits('save-success')
      ElMessage.success({message: '创建成功'})
      handleCancel()
    }).catch(() => {
    })
  }
}

/**
 * 添加筛选条件
 */
function handleAdd() {
  form.value.push(getItem())
}

/**
 * 删除筛选条件
 * @param index
 */
function handleDelete(index) {
  ElMessageBox.confirm('您确定要删除这一条数据吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    form.value.splice(index, 1)
    getError()
  }).catch(() => {
  })
}

/**
 * 获取setting数据类型
 */
function getSettingValueType(setting) {
  if (setting && setting.length > 0) {
    const value = setting[0]
    return typeof value
  }
  return []
}

/**
 * 聚焦datepicker
 */
function dateRangeSelect(formItem, index) {
  const datePicker = cxt.refs[`wkDatePicker${index}`][0]
  nextTick(() => {
    datePicker.focus()
    datePicker.pickerVisible = true
  })
}

/**
 * datepicker change
 */
function datePickerChange(formItem) {
  formItem.timeTypeName = ''
  formItem.timeType = ''
}

/**
 * 时间筛选配置
 */
function getPickerOptions(item, itemIndex) {
  const shortcuts = []
  for (let index = 0; index < timeTypes.value.length; index++) {
    const element = timeTypes.value[index]
    shortcuts.push({
      text: element.text,
      onClick: (picker) => {
        picker.$emit('pick', [], false)
        nextTick(() => {
          item.timeTypeName = element.text
          item.timeType = element.value
        })
      }
    })
  }

  return {
    shortcuts: shortcuts
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-dialog__body) {
  padding: 10px 20px;
}

:deep(el-form-item__label) {
  width: 100%;
  text-align: left;
}

.filter-container {
  max-height: 200px;
  overflow-y: auto;
}

.save {
  margin-top: 10px;

  .name {
    width: 300px;
    margin-left: 10px;

    :deep(.el-input__inner) {
      height: 32px;
    }
  }

  .save-setting {
    margin-top: 20px;
  }
}

.el-form-item {
  margin-bottom: 0;
}

.el-row {
  margin-bottom: 20px;

  .delete-btn {
    margin-left: 15px;
    color: #bbb;
    cursor: pointer;
  }

  .el-select,
  .el-date-editor {
    width: 100%;

    :deep(.el-range__icon) {
      line-height: 26px;
    }
  }

  .el-input-number {
    :deep(input) {
      text-align: left;
      padding: 0 8px;
    }
  }

  .date-range-content {
    position: absolute;
    left: 30px;
    right: 30px;
    top: 4px;
    height: 30px;
    line-height: 30px;
    background: white;
    font-size: 13px;
    cursor: pointer;
  }
}

.warning-info {
  width: 100%;
  font-size: 14px;
  color: #f56c6c;
  margin-top: 10px;

  .desc {
    padding-left: 8px;
  }
}

.scene-name-container {
  padding-bottom: 15px;

  .scene-input {
    width: 300px;
  }
}

.scene-name {
  margin-bottom: 10px;
}
</style>
